<template>
  <view class="content">
    <uni-nav-bar
      title="商城订单"
      color="#fff"
      backgroundColor="transparent"
      :border="false"
      :statusBar="true"
      :fixed="true"
      @clickLeft="$c.back()"
    >
      <view class="uni-nav-bar-l-icon" slot="left">
        <view class="uni-nav-bar-l-icon-left icon">
          <image :src="$img('/static/img2/cc20.png')" lazy-load></image>
        </view>
      </view>
    </uni-nav-bar>

    <view class="tab">
      <view
        class="tab-item"
        v-for="(item, i) in tabList"
        :key="i"
        :class="{
          act: tabCur == i
        }"
        @click="tabChange(i)"
      >
        <text>{{ item.title }}</text>
      </view>
    </view>

    <mescroll-body
      ref="mescrollRef"
      @init="mescrollInit"
      @down="downCallback"
      @up="getList"
      :down="downOption"
      :up="upOption"
    >
      <view class="order-list">
        <view class="order-item" v-for="(item, i) in listData" :key="i">
          <view class="order-hd">
            <view class="time">提交时间{{ item.addtime }}</view>

            <view class="status">
              <template v-if="item.status == 2">待发货</template>
              <template v-if="item.status == 3">待收货</template>
              <template v-if="item.status == 4">已完成</template>
            </view>
          </view>

          <view class="order-bd">
            <view class="pic">
              <image :src="item.order_list.imgurl" lazy-load></image>
            </view>

            <view class="bd-info">
              <view class="title hang1">
                {{ item.order_list.title }}
              </view>

              <view class="sku">{{ item.order_list.sku }}</view>

              <view class="price-num">
                <view>¥{{ item.order_list.price }}</view>

                <view class="num">×{{ item.order_list.num }}</view>
              </view>
            </view>
          </view>

          <view class="line"></view>

          <view class="order-btns">
            <view class="btn" @click="toOrder(item)">
              <image :src="$img('/static/img2/cc126.png')" lazy-load></image>

              <!-- 查看详情 -->
            </view>

            <template v-if="item.status == 3">
              <view class="btn" @click="toExpress(item)">
                <image :src="$img('/static/img2/cc125.png')" lazy-load></image>

                <!-- 查看物流 -->
              </view>

              <view class="btn act" @click="submitGet(item)">
                <image :src="$img('/static/img2/cc127.png')" lazy-load></image>

                <!-- 确认收货 -->
              </view>
            </template>
          </view>
        </view>
      </view>
    </mescroll-body>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabList: [
        {
          id: 1,
          title: '全部'
        },
        {
          id: 3,
          title: '待发货'
        },
        {
          id: 4,
          title: '待收货'
        },
        {
          id: 5,
          title: '已完成'
        }
      ],
      tabCur: 0,
      // 下拉刷新的配置(可选, 绝大部分情况无需配置)
      downOption: {
        auto: false
      },
      // 上拉加载的配置(可选, 绝大部分情况无需配置)
      upOption: {
        auto: true,
        page: {
          size: 10 // 每页数据的数量,默认10
        }
      },
      listData: []
    }
  },

  methods: {
    submitGet(item) {
      this.req({
        url: 'order_over',
        data: {
          order_id: item.id
        },
        success: res => {
          if (res.status == 1) {
            this.$c.toast({
              title: res.msg,
              duration: 500,
              success: () => {
                this.tabChange(this.tabCur)
              }
            })
          }
        }
      })
    },

    toExpress(item) {
      this.$c.to({
        url: '/package/mine/mall-express',
        query: {
          id: item.id
        }
      })
    },

    toOrder(item) {
      this.$c.to({
        url: '/package/mine/mall-order-detail',
        query: {
          id: item.id
        }
      })
    },

    tabChange(i) {
      this.tabCur = i
      this.listData = []
      this.mescroll.resetUpScroll()
      this.mescroll.scrollTo(0, 0)
    },

    getList({ num, size }) {
      let url = 'order_list'
      let data = {
        page: num,
        type: this.tabList[this.tabCur].id
      }

      this.req({
        url,
        data,
        Loading: true,
        success: res => {
          if (res.status == 1) {
            if (num == 1) {
              this.listData = []
            }

            this.listData = this.listData.concat(res.data.order.list)
            this.mescroll.endByPage(
              res.data.order.list.length,
              res.data.order.last_page
            )
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
.content {
  padding: 0 0 30rpx;

  image {
    width: 100%;
    height: 100%;
    border-radius: inherit;
  }

  .icon {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .tab {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10rpx 30rpx;

    .tab-item {
      position: relative;
      // margin-right: 50rpx;
      padding: 0 0 10rpx;

      font-family: 光良酒-干杯体, 光良酒-干杯体;
      font-weight: 400;
      font-size: 28rpx;
      color: #ffffff;
      text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.3);

      &.act {
        color: #e40d1d;

        &::after {
          content: '';
          display: block;
          width: 36rpx;
          height: 4rpx;
          background: #e40d1d;
          border-radius: 304rpx 304rpx 304rpx 304rpx;
          position: absolute;
          left: 50%;
          bottom: 0;
          transform: translateX(-50%);
        }
      }
    }
  }
  .order-list {
    padding: 1rpx 30rpx 0;

    .order-item {
      padding: 0 30rpx 30rpx;
      background: #252525;
      border: 2rpx solid #444444;
      margin-top: 30rpx;

      .order-hd {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 0;

        .time {
          font-size: 28rpx;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #ffffff;
        }

        .status {
          font-size: 28rpx;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #e40d88;
        }
      }

      .order-bd {
        display: flex;
        align-items: center;

        .pic {
          width: 140rpx;
          height: 140rpx;
          border-radius: 0rpx 0rpx 0rpx 0rpx;
          border: 2rpx solid #000000;
          box-sizing: border-box;
        }

        .bd-info {
          width: calc(100% - 140rpx);
          box-sizing: border-box;
          padding-left: 16rpx;

          .title {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #ffffff;
          }

          .sku {
            margin: 6rpx 0;

            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 22rpx;
            color: #c3c3c3;
          }

          .price-num {
            display: flex;
            justify-content: space-between;
            align-items: center;

            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 26rpx;
            color: #e40d88;

            .num {
              font-family: PingFang SC, PingFang SC;
              font-weight: 400;
              font-size: 22rpx;
              color: #cccccc;
            }
          }
        }
      }

      .line {
        margin: 20rpx 0;
        width: 100%;
        height: 1px;
        background: #333333;
      }

      .order-btns {
        display: flex;
        justify-content: flex-end;

        .btn {
          width: 156rpx;
          height: 64rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-left: 30rpx;

          // font-size: 28rpx;
          // font-family: Source Han Sans CN;
          // font-weight: 400;
          // color: #222222;

          // &.act {
          //   background: linear-gradient(
          //     90deg,
          //     #6adeff 0%,
          //     #7ab5ff 50%,
          //     #ff7feb 100%
          //   );
          // }
        }
      }
    }
  }
}
</style>
